<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
    <title>会员注册表单</title>
    <meta  charset=utf-8 >
    <style type="text/css">    /*嵌入的样式表*/
    table{
        width:400px;
        margin:0 auto;
        border:1px solid black;
        border-collapse:collapse;
        font-size:13px;
    }
    </style>
    <script src="appWeb.js" type="text/javascript" ></script>
</head>
<body>

<!--以下<form></form>之间代码完成表单定义-->
<form name="form1" method="post" action="success.html">
    <table border="1">
        <tr> <td height="32" colspan="3">用户个人信息登录</td>
        </tr>
        <tr>
            <td width="80">用户名：</td>
            <td width="250"><input type="text" name="myname" id="myname" autofocus required></td>
            <td width="55">html5 autofocus</td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="mypassword" id="mypassword"></td>
            <td></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="repassword" id="repassword"></td>
            <td></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="rad" id="rad" value="rad1">男
                <input type="radio" name="rad" class="rad"  value="rad2">女</td>
            <td></td>
        </tr>
        <tr>
            <td>Email：</td>
            <td><input type="email" name="myemail" id="myemail" required> </td>
            <td>html5新增</td>
        </tr>
        <tr>
            <td>Phone：</td>
            <td><input type="tel" name="tel" id="tel" required ></td>
            <td>html5新增</td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="number" name="myage" id="myage" min=16 max=28> </td>
            <td>html5新增</td>
        </tr>
        <tr>
            <td>专业：</td>
            <td><input type="text"  list="alist" name="mydepartment" id="mydepartment" placeholder="maths" >
                <datalist id="alist">
                    <option value="computer"> </option>
                    <option value="physics"> </option>
                    <option value="chinese"> </option>
                    <option value="Maths"> </option>
                </datalist>
            </td>
            <td>html5新增</td>
        </tr>

        <tr>
            <td>出生日期：</td>
            <td><input type="date" name="birthdate" id="birthdate"> </td>
            <td>html5新增</td>
        </tr>
        <tr>
            <td>周数：</td>
            <td><input type="week" name="myweek" id="myweek"></td>
            <td>html5新增</td>
        </tr>
        <tr>
            <td>您选择的颜色：</td>
            <td><input type="color" name="mycolor" id="mycolor"></td>
            <td>html5新增</td>
        </tr>
        <tr>
            <td>英语等级：</td>
            <td><input type="range" name="rank"min=2 max=8  step=2 value="2" onChange="showr.value=value" id="rank">
                <output id="showr">4</output>级
            </td>
            <td>html5新增</td>
        </tr>
        <!-- HTML4以下 -->

        <tr>
            <td>爱好：</td>
            <td>
                <input name="check" type="checkbox" value="sport" class="check">户外
                <input name="check" type="checkbox" value="voice" class="check">音乐
                <input name="check" type="checkbox" value="movie" class="check">购物
                <input name="check" type="checkbox" value="shopping" class="check">其他
            </td>
            <td></td>
        </tr>
        <tr>
            <td>所在地：</td>
            <td>
                <select name="menu" size="" id="menu">
                    <option value="2" class="menu">北京</option>
                    <option value="3" class="menu">上海</option>
                    <option value="4" class="menu">大连</option>
                    <option value="5" class="menu">其他</option>
                </select>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>备注：</td>
            <td><textarea name="texta" rows="3" cols="30" wrap="" id="texta"></textarea>
            </td>
            <td></td>
        </tr>
        <tr>
            <td><input name="sub" type="submit" value="提交" onclick="saveStorage()"> </td>

            <td><input name="reset" type="reset" value="重置"></td>
            <td></td>
        </tr>
        <td> <label for myfile>请多重选择文件：</label></td>
        <td> <input type="file" id="myfile" name="myfile" multiple /></td>
        <td></td>
        </tr>
    </table>
</form>
<hr>
<p align="center">检索：
    <input type="text" id="find">
    <input type="button" value="检索" onclick="findStorage('msg')">
    <input type="button" value="显示全部" onclick="loadAll()">
</p>
<p id="msg"></p>
<div id="list" >
</div>
<button type="button" class="btn btn-default" style="margin-left: 36%;font-size: 100px; " ><a href="menu.html" style="text-decoration-line: none">返回菜单栏</a
</body>
</html>
